<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { JnmlGetOutputDTO, JnmlQueryResult } from '@/api/xtpz-dto'
import xtpzService from '@/api/xtpz'
import type { FormInstance, FormRules } from 'element-plus'

interface Prop {
  mbpzbm: string | undefined
}
// 入参
const props = defineProps<Prop>()
const emits = defineEmits(['refresh'])
// 生命周期

/*
 * 打开弹框
 */
//
const loading = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
// 弹框名称
const title = ref<string>('')
// 弹框类型
const typeValue = ref<string>('')
const openDialog = (row: JnmlQueryResult | null, type: string) => {
  // 清空数据
  ruleForm.value = {
    bz: '',
    mbpzbm: '',
    jnmlbm: '',
    jnmlmc: '',
  }
  typeValue.value = type
  if (type === 'update' && row) {
    // 修改
    title.value = '修改题名'
    getJnml(row)
  } else if (type === 'add') {
    title.value = '添加题名'
    ruleForm.value = {
      bz: '',
      mbpzbm: '',
      jnmlbm: '',
      jnmlmc: '',
    }
  }
  dialogVisible.value = true
}

/**
 * 表单
 */
const ruleForm = ref<JnmlGetOutputDTO>({
  bz: '',
  mbpzbm: '',
  jnmlbm: '',
  jnmlmc: '',
})

/**
 * 获取详情
 */
const getJnml = (row: JnmlQueryResult) => {
  const params = {
    jnmlbm: row.jnmlbm,
  }
  xtpzService
    .getJnml(params)
    .then((res) => {
      if (res) {
        ruleForm.value = res.data
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 验证表单
 */
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<JnmlGetOutputDTO>>({
  jnmlmc: [{ required: true, message: '必填', trigger: 'change' }],
})
const validateForm = () => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      loading.value = true
      typeValue.value === 'add' ? addJnml() : updateJnml()
    }
  })
}

/*
 * 添加模板
 */
const addJnml = () => {
  const params = {
    bz: ruleForm.value.bz,
    jnmlmc: ruleForm.value.jnmlmc,
    mbpzbm: props.mbpzbm || '',
  }
  xtpzService
    .addJnml(params)
    .then(() => {
      ElMessage.success('添加成功')
      emits('refresh')
      dialogVisible.value = false
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/*
 * 修改模板
 */
const updateJnml = () => {
  const params = {
    bz: ruleForm.value.bz,
    jnmlbm: ruleForm.value.jnmlbm,
    jnmlmc: ruleForm.value.jnmlmc,
  }
  xtpzService
    .updateJnml(params)
    .then(() => {
      ElMessage.success('修改成功')
      emits('refresh')
      dialogVisible.value = false
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

defineExpose({ openDialog })
</script>
<template>
  <el-dialog v-model="dialogVisible" :title="title" width="600px" :close-on-click-modal="false">
    <div class="dialog-box">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="90px" status-icon>
        <el-form-item label="题名" prop="jnmlmc">
          <el-input v-model="ruleForm.jnmlmc" maxlength="100" />
        </el-form-item>
        <el-form-item label="备注" prop="bz">
          <el-input v-model="ruleForm.bz" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="validateForm" :loading="loading">保存</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  width: 100%;
}
</style>
